<%-- 
    Document   : enter_details
    Created on : Aug 1, 2011, 4:21:49 PM
    Author     : priyantha
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib  prefix="form"  uri="http://www.springframework.org/tags/form"  %>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Enter Details</title>

        <%--for calendar--%>
        <script language="javaScript" type="text/javascript" src="public/javascripts/calendar.js"></script>
        <link href="public/styles/calendar.css" rel="stylesheet" type="text/css">

        <%--for tooltips--%>
        <link href="public/styles/toolTips.css" rel="stylesheet" type="text/css"/>
        <script language="javaScript" type="text/javascript" src="public/javascripts/toolTips.js"></script>

        <%--for autocomplete--%>
        <script language="javaScript" type="text/javascript" src="public/javascripts/jquery.min.js"></script>
        <script language="javaScript" type="text/javascript" src="public/javascripts/jquery-ui.min.js"></script>
        <link href="public/styles/jquery-ui.css" rel="stylesheet" type="text/css"/>

        <%--onload--%>
        <script type="text/javascript">
            window.onload = function() {
                document.getElementById("email").focus();
            }
        </script>

        <%-- autocomplete script--%>
        <script>
            $(document).ready(function() {
                $("input#autocomplete1").autocomplete({
                    source: ["01", "02", "03", "04", "05", "06", "07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31"]
                });

                $("input#autocomplete2").autocomplete({
                    source: ["01", "02", "03", "04", "05", "06", "07","08","09","10","11","12"]
                });

                $("input#autocomplete3").autocomplete({
                    source: ["1950", "1951", "1952", "1953", "1954", "1955", "1956","1957","1958","1959","1960","1961","1962","1963","1964","1965","1966","1967","1968","1969","1970","1971","1972",
                        "1973","1974","1975","1976","1977","1978","1979","1980","1981","1982","1983","1984","1985","1986","1987","1988","1989","1990","1991","1992","1993","1994","1995","1996","1997",
                        "1998","1999","2000","2001","2002","2003","2004","2005","2006","2007","2008","2009","2010","2011","2012","2013","2014","2015","2016","2017","2018","2019","2020","2021","2022",
                        "2023","2024","2025","2026","2027","2028","2029","2030"]
                });
            });
        </script>

    </head>
    <body>


        <form:form action="" commandName="user">

            <table align="center">

                <tr>
                    <td>email <font color="#FF0000">*</font></td>
                    <td> 
                        <div onMouseover="ddrivetip('Please enter a valid email address in order to receive your account We will not spam or disclose your email address to anyone for any reason.', '#EFEFEF')"
                             onMouseout="hideddrivetip()">

                            <form:input path="email" /> </div> </td>

                </tr>
                <tr>
                    <td>Password<font color="#FF0000">*</font></td>
                    <td><%-- <a href="#" class="tooltip" title="Password length should be at least 6 characters.">--%>

                        <div onMouseover="ddrivetip('Password length should be at least 6 characters.', '#EFEFEF')"
                             onMouseout="hideddrivetip()">
                            <form:password path="password" showPassword="true" /> <%--</a>--%> </div></td>
                </tr>
                <tr>
                    <td>Confirm Password<font color="#FF0000">*</font></td>
                    <td>
                        <div onMouseover="ddrivetip('Please re-enter the password to confirm.', '#EFEFEF')"
                             onMouseout="hideddrivetip()">
                            <form:password path="confirmPassword" showPassword="true" /> </div> </td>
                </tr>
                <tr></tr>
                <tr>
                    <td>First Name<font color="#FF0000">*<form:errors
				path="firstName" /></font></td>
                    <td>
                        <div onMouseover="ddrivetip('Enter your first name here - only characters are allowed.', '#EFEFEF')"
                             onMouseout="hideddrivetip()">
                            <form:input path="firstName" />  </div></td>
                </tr>
                <tr>
                    <td>Last Name<font color="#FF0000">*<form:errors
				path="lastName" /></font></td>
                    <td>
                        <div onMouseover="ddrivetip('Enter your last name here - only characters are allowed.', '#EFEFEF')"
                             onMouseout="hideddrivetip()">
                            <form:input path="lastName" /> </div> </td>
                </tr>
                <tr>
                    <td>Gender<font color="#FF0000">*</font></td>

                    <td>Male <form:radiobutton path="gender" value="M"/>
                        Female <form:radiobutton path="gender" value="F"/> </td>
                </tr>
                <tr>
                    <td>DOB<font color="#FF0000">*</font></td>
                    <td>
                        <div onMouseover="ddrivetip('Select your birthday in DD-MM-YYYY format in the fields.', '#EFEFEF')"
                             onMouseout="hideddrivetip()">
                            <form:input path="date" size="3" id="autocomplete1" /> <form:input path="month" size="3" id="autocomplete2"/>  <form:input path="year" size="6" id="autocomplete3"/>


                            <form:hidden path="datum1" name="datum1" />
                            <a href="#" onClick="setYears(1950, 2050);
                                showCalender(this, 'datum1');">
                                <img src="public/images/cal_ico4.jpg"></a>
                        </div>


                        <!-- Calender Script  -->

                        <table id="calenderTable">
                            <tbody id="calenderTableHead">
                                <tr>
                                    <td colspan="4" align="center">
                                        <select onChange="showCalenderBody(createCalender(document.getElementById('selectYear').value,
                                            this.selectedIndex, false));" id="selectMonth">
                                            <option value="0">Jan</option>
                                            <option value="1">Feb</option>
                                            <option value="2">Mar</option>
                                            <option value="3">Apr</option>
                                            <option value="4">May</option>
                                            <option value="5">Jun</option>
                                            <option value="6">Jul</option>
                                            <option value="7">Aug</option>
                                            <option value="8">Sep</option>
                                            <option value="9">Oct</option>
                                            <option value="10">Nov</option>
                                            <option value="11">Dec</option>
                                        </select>
                                    </td>
                                    <td colspan="2" align="center">
                                        <select onChange="showCalenderBody(createCalender(this.value,
                                            document.getElementById('selectMonth').selectedIndex, false));" id="selectYear">
                                        </select>
                                    </td>
                                    <td align="center">
                                        <a href="#" onClick="closeCalender();"><img src="public/images/close_5.jpg"></a>
                                    </td>
                                </tr>
                            </tbody>
                            <tbody id="calenderTableDays">
                                <tr style="">
                                    <td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td>
                                </tr>
                            </tbody>
                            <tbody id="calender"></tbody>
                        </table>


                    </td>
                </tr>
                <tr>
                    <td>NIC/Passport<font color="#FF0000">*</font></td>
                    <td>
                        <div onMouseover="ddrivetip('Please enter NIC or passport here (ex- 812345678v)', '#EFEFEF')"

                             onMouseout="hideddrivetip()">
                            <form:select path="nic">

                                <form:option value="NIC"/>
                                <form:option value="Passport"/>
                            </form:select>
                            <form:input path="np" size="15" /> </div>
                    </td>

                </tr>
                <tr>
                    <td>Street</td>
                    <td>
                        <div onMouseover="ddrivetip('Enter your Street address(ex- 5th lane)', '#EFEFEF')"
                             onMouseout="hideddrivetip()">
                            <form:input path="street" /> </div> </td>
                </tr>
                <tr>
                    <td>
                        City</td>
                    <td>
                        <div onMouseover="ddrivetip('Enter your current city.', '#EFEFEF')"
                             onMouseout="hideddrivetip()">
                            <form:input path="city" /> </div> </td>
                </tr>
                <tr>
                    <td>Country<font color="#FF0000">*</font></td>
                    <td>
                        <div onMouseover="ddrivetip('Select your country.', '#EFEFEF')" onMouseout="hideddrivetip()" >
                            <form:select path="country"> </div>

                                <form:options items="${countryList}" itemValue="countryName" itemLabel="countryName" cssStyle="width:100px" onmousemove="hideddrivetip()"/>
                        </form:select>
                    </td>

                </tr>

                <tr>
                    <td>Mobile number<font color="#FF0000">*</font></td>
                    <td>
                        <div onMouseover="ddrivetip('Please select country code & enter your mobile number here.', '#EFEFEF')"
                             onMouseout="hideddrivetip()" >

                             <form:select path="countrycode" ></div>
                                 <form:options items="${countryCodeList}" itemValue="codeName" itemLabel="codeName" onmousemove="hideddrivetip()" />
                             </form:select>

                         
                            <form:input path="mobile" /> 
                    </td>

                </tr>
                <tr>
                    <td></td>
                    <td>
                        <div onMouseover="ddrivetip('Please confirm for newsletter subscription.', '#EFEFEF')"
                             onMouseout="hideddrivetip()">
                            <form:checkbox path="emailsub"/>Subscribe for newsletters </div>
                    </td>


                </tr>
                <tr>
                    <td></td>
                    <td>
                        <div onMouseover="ddrivetip('Please confirm for sms alerts on ticket booking information.', '#EFEFEF')"
                             onMouseout="hideddrivetip()">
                            <form:checkbox path="smssub"/>Subscribe for sms alerts </div>
                    </td>


                </tr>


                <tr>

                    <td></td>

                    <td><div onMouseover="ddrivetip('Clicking “Submit” indicates that you have read & agreed to our  Privacy Policy & Terms of Use', '#EFEFEF')"
                             onMouseout="hideddrivetip()"><input type="submit" value="Submit" /></div></td>
                </tr>
            </table>

        </form:form>


    </body>
</html>
